<template>
	<view>
		<view class="menu-title">
			<view class="menu-name" v-for="(items, index) in menuList" :key="index" @click="changemMenu(index)">
				<view class="menu-items-name" :class="current === index ?'current-name':''">
					{{ items.name }}
				</view>
			</view>
		</view>
		<view class="nav-bar"></view>
		<view v-if="current === 0" class="conk-content conk-mess">
			<view class="eq-list">
				<view class="eq-name">设备名称</view>
				<view> {{ equipment.name }}</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">故障类型</view>
				<view> {{ equipment.type }}</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">故障时间</view>
				<view> {{ equipment.time }}</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">联系人</view>
				<view> {{ equipment.linkMan }}</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">联系电话</view>
				<view> {{ equipment.linkPhone }}</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">状态</view>
				<view> {{ equipment.status }}</view>
			</view>
		</view>
		<view v-if="current === 1" class="conk-content conk-info">
			<view class="eq-list">
				<view class="eq-name">故障描述</view>
				<view>描述描述描述描述</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">上传图片</view>
				<view class="icon-right">
					<image style="width: 100%; height: 100%;" mode="aspectFit" :src="icon.right"></image>
				</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">处理结果</view>
				<view class="handle">
					<radio-group @change="radioChange" class="uni-group">
						<label class="uni-list-cell" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio style="width: 30rpx;height: 30rpx;display: flex;align-items: center;" :value="item.value" :checked="index === current" />
							</view>
							<view class="radio-name">{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="eq-list">
				<view class="eq-name">备注</view>
				<view>备注备注备注</view>
			</view>
		</view>
		<view v-if="current === 1" class="submit-button">
			<view class="submit-title">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				menuList: [{
					name: '故障信息'
				}, {
					name: '维修记录'
				}],
				equipment: {
					name: '午餐机（AQ5454637500）',
					type: '硬件故障',
					time: '2020-0908',
					linkMan: '张三',
					linkPhone: '13584578546',
					status: '待维修'
				},
				icon: {
					right: '/static/images/icons/icon_next@3x.png',
					bg_btn: '/static/images/bg_btn@3x.png'
				},
				items: [{
					name: '已修复',
					value: '1'
				}, {
					name: '未修复',
					value: '2'
				}]
			}
		},
		methods: {
			changemMenu(index) {
				this.current = index
			}
		}
	}
</script>

<style>
	.nav-bar {
		width: 100%;
		height: 10rpx;
		background: rgba(245, 245, 245, 1);

	}

	.conk-content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.menu-title {
		display: flex;
		align-items: center;
		height: 122rpx;
		padding: 0rpx 30rpx;
	}

	.menu-name {
		position: relative;
	}

	.menu-title .menu-name:not(:last-child) {
		margin-right: 35rpx;
	}

	.menu-items-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(153, 153, 153, 1);
		padding: 16rpx 0;
	}

	.current-name {
		font-size: 36rpx;
		color: #333333
	}

	.current-name:after {
		content: "";
		display: table;
		width: 40rpx;
		height: 8rpx;
		background: rgba(255, 195, 36, 1);
		border-radius: 4rpx;
		position: absolute;
		bottom: 0;
		left: calc(50% - 20rpx)
	}

	.eq-list {
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}

	.conk-mess .eq-list:not(:last-child) {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.conk-info .eq-list {
		border-bottom: 1rpx solid #E0E0E0;
	}

	.eq-name {
		color: #999999;
	}

	.conk-content {
		padding: 0 30rpx;
	}

	.icon-right {
		width: 15rpx;
		height: 30rpx;
	}

	.uni-group,
	.uni-list-cell,
	.radio-name {
		display: flex;
		align-items: center;
	}

	.radio-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
		margin-left: 10rpx;
	}

	.handle {
		justify-content: flex-end;
	}

	.uni-group .uni-list-cell:not(:first-child) {
		margin-left: 20rpx;
	}

	.submit-button {
		width: 700rpx;
		height: 108rpx;
		background: url('~@/static/images/bg_btn@3x.png') no-repeat;
		background-size: 100% 100%;
		margin: 90rpx auto 0rpx auto;

	}

	.submit-title {
		height: 98rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}
</style>
